<template>
  <div id="app">

    <MyHeader title="购物车案例"> </MyHeader>
    <MyGoods v-for="item in list" :good="item" :key="item.id"></MyGoods>
    <MyFooter :arr="list" @changeAll="changeFn"></MyFooter>

  </div>
</template>

<script>


import MyGoods from './components/MyGoods.vue';
import MyHeader from './components/MyHeader.vue';
import MyFooter from './components/MyFooter.vue';

export default {

  components: {
    MyFooter,
    MyGoods,
    MyHeader
  },
  data() {
    return {
      list: [
        {
          id:1,
          img: 'http://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
          name: 'Apple iPhone 11 Pro Max 64GB',
          price: '1199.00',
          good_state: true,
          count: 1
        } ,
        {
          id:2,
          img: 'http://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
          name: 'Apple iPhone 11 Pro Max 64GB',
          price: '1199.00',
          good_state: true,
          count: 1
        } ,
        {
          id:3,
          img: 'http://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
          name: 'Apple iPhone 11 Pro Max 64GB',
          price: '1199.00',
          good_state: true,
          count: 1
        } 
        
      ]
    }
  },
  methods: {
    changeFn(val){
      this.list.forEach(item => {
          this.list.forEach(item => {
            item.good_state = val
          })
      })
    }
  }
}
</script>

<style scoped>
  #app {
    margin-top: 48px;
  }
</style>
